<template>
  <div class="comment-editor">
    <!-- 头部展示 -->
    <div class="info-top-title">
      <div>
        <span class="myInfo">评论编辑</span
        ><span class="english"> Comment Editor</span>
        <span class="asd"></span>
      </div>
    </div>
    <!-- 我的信息展示 -->
    <div class="show-user-info">
      <div id="wangComm"></div>
    </div>
    <div class="commit">
      <div class="add-article-box-footer">
        <button
          id="sub"
          type="button"
          @click="commitinfo"
          name="submit"
          class="btn btn-primary"
        >
          提交
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import Editors from "wangeditor";
import axios from "axios";
import hljs from "highlight.js";
export default {
  name: "CommentEditor",
  data() {
    return {
      commData: null,
      editor: null,
    };
  },
  created() {
    this.getRouterData();
  },
  mounted() {
    //监听浏览器刷星
    window.addEventListener("beforeunload", this.beforeunloadFn());
    this.aba();
  },
  destroyed() {
    const that = this;
    //   window.removeEventListener('beforeunload',  e =>{that.beforeunloadFn(e)})
  },
  methods: {
    //获取路由传递的参数
    getRouterData() {
      this.commData = this.$route.params.commdata;
    },
    //提交修改
    commitinfo() {
      if (this.$store.state.user == 0) {
        this.open4("请先登录");
      } else if (
        this.editor.txt.html() == null ||
        this.editor.txt.html() == "" ||
        typeof this.editor.txt.html() == "undefined"
      ) {
        this.open4("请填写评论内容");
      } else {
        //提交信息
        const that = this;
        axios({
          method: "post",
          url: "/aabbcc/userArticleComment/updataComment",
          data: {
            userId: this.$store.state.user,
            commId: this.commData.commId,
            artId: this.commData.artId,
            commentContent: this.editor.txt.html(),
          },
        }).then(function (res) {
            if(res.data.code == 200){
              that.open2("修改成功")
            }else if(res.data.code == 415){
            that.open4("修改异常")
            }
        });
      }
    },
    aba() {
      const editor = new Editors("#wangComm");
      // 或者 const editor = new E( document.getElementById('div1') )
      // 设置编辑区域高度为 500px
      editor.config.height = 100;
      editor.config.zIndex = 500;
      editor.config.emotions = [
        {
          title: "新浪", // tab 的标题
          type: "image", // 'emoji' 或 'image' ，即 emoji 形式或者图片形式
          content: [
            {
              alt: "[坏笑]",
              src: `http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif`,
            },
            {
              alt: "[舔屏]",
              src: `http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif`,
            },
            {
              alt: "[浮云]",
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/fuyun_thumb.gif",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c9/geili_thumb.gif",
              alt: "[给力]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f2/wg_thumb.gif",
              alt: "[围观]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/vw_thumb.gif",
              alt: "[威武]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/panda_thumb.gif",
              alt: "[熊猫]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/81/rabbit_thumb.gif",
              alt: "[兔子]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/otm_thumb.gif",
              alt: "[奥特曼]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/15/j_thumb.gif",
              alt: "[囧]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/hufen_thumb.gif",
              alt: "[互粉]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c4/liwu_thumb.gif",
              alt: "[礼物]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ac/smilea_thumb.gif",
              alt: "[呵呵]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0b/tootha_thumb.gif",
              alt: "[嘻嘻]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6a/laugh.gif",
              alt: "[哈哈]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/14/tza_thumb.gif",
              alt: "[可爱]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/kl_thumb.gif",
              alt: "[可怜]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a0/kbsa_thumb.gif",
              alt: "[挖鼻屎]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f4/cj_thumb.gif",
              alt: "[吃惊]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/shamea_thumb.gif",
              alt: "[害羞]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c3/zy_thumb.gif",
              alt: "[挤眼]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/29/bz_thumb.gif",
              alt: "[闭嘴]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/71/bs2_thumb.gif",
              alt: "[鄙视]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/lovea_thumb.gif",
              alt: "[爱你]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9d/sada_thumb.gif",
              alt: "[泪]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/19/heia_thumb.gif",
              alt: "[偷笑]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/8f/qq_thumb.gif",
              alt: "[亲亲]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/b6/sb_thumb.gif",
              alt: "[生病]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/58/mb_thumb.gif",
              alt: "[太开心]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/17/ldln_thumb.gif",
              alt: "[懒得理你]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/98/yhh_thumb.gif",
              alt: "[右哼哼]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/zhh_thumb.gif",
              alt: "[左哼哼]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a6/x_thumb.gif",
              alt: "[嘘]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/cry.gif",
              alt: "[衰]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/73/wq_thumb.gif",
              alt: "[委屈]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9e/t_thumb.gif",
              alt: "[吐]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f3/k_thumb.gif",
              alt: "[打哈欠]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/27/bba_thumb.gif",
              alt: "[抱抱]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7c/angrya_thumb.gif",
              alt: "[怒]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/5c/yw_thumb.gif",
              alt: "[疑问]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a5/cza_thumb.gif",
              alt: "[馋嘴]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/88_thumb.gif",
              alt: "[拜拜]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/e9/sk_thumb.gif",
              alt: "[思考]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/24/sweata_thumb.gif",
              alt: "[汗]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7f/sleepya_thumb.gif",
              alt: "[困]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6b/sleepa_thumb.gif",
              alt: "[睡觉]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/90/money_thumb.gif",
              alt: "[钱]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0c/sw_thumb.gif",
              alt: "[失望]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/cool_thumb.gif",
              alt: "[酷]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/8c/hsa_thumb.gif",
              alt: "[花心]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/49/hatea_thumb.gif",
              alt: "[哼]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/36/gza_thumb.gif",
              alt: "[鼓掌]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d9/dizzya_thumb.gif",
              alt: "[晕]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/1a/bs_thumb.gif",
              alt: "[悲伤]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/62/crazya_thumb.gif",
              alt: "[抓狂]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/91/h_thumb.gif",
              alt: "[黑线]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/yx_thumb.gif",
              alt: "[阴险]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/nm_thumb.gif",
              alt: "[怒骂]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/hearta_thumb.gif",
              alt: "[心]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ea/unheart.gif",
              alt: "[伤心]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/58/pig.gif",
              alt: "[猪头]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d6/ok_thumb.gif",
              alt: "[ok]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d9/ye_thumb.gif",
              alt: "[耶]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d8/good_thumb.gif",
              alt: "[good]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c7/no_thumb.gif",
              alt: "[不要]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d0/z2_thumb.gif",
              alt: "[赞]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/come_thumb.gif",
              alt: "[来]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d8/sad_thumb.gif",
              alt: "[弱]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/91/lazu_thumb.gif",
              alt: "[蜡烛]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6a/cake.gif",
              alt: "[蛋糕]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d3/clock_thumb.gif",
              alt: "[钟]",
            },
            {
              src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/1b/m_thumb.gif",
              alt: "[话筒]",
            },
          ],
        },
      ];
      //显示表情img
      editor.config.emotionShow = "icon";

      // 默认情况下，显示所有菜单
      editor.config.menus = ["bold", "emoticon"];
      // 挂载highlight插件
      editor.highlight = hljs;

      editor.create();
      if(this.commData != null){
           editor.txt.html(this.commData.commentContent);
      }
   
      this.editor = editor;
    },
    //监听浏览器刷新
    beforeunloadFn() {
      //刷星去评论列表
      if (this.commData == null || typeof this.commData == "undefined") {
        this.$router.push({
          name: "connlist",
        });
      }
    },
    open4(message) {
      //错误提示框
      this.$message({
        showClose: true,
        message: message,
        type: "error",
      });
    },
    open2(message) {
      //成功提示框
      this.$message({
        showClose: true,
        message: message,
        type: "success",
      });
    },
  },
};
</script>

<style scoped>
.comment-editor {
  width: 96%;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
/*头部 */
.info-top-title {
  width: 100%;
  height: 30px;
}
.info-top-title .myInfo {
  color: #333;
  font-size: 25px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.info-top-title > div {
  cursor: pointer;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
}
.info-top-title > div:hover .asd {
  opacity: 1;
  transform: scaleX(1);
  transition: all 0.5s linear;
}
.info-top-title .asd {
  width: 100%;
  border: 1px solid #2882c5;
  /* height: 1px; */
  /* background: red; */
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.5s linear;
}
/* 我的信息展示 */
.show-user-info {
  width: 100%;
  margin-top: 30px;
}
.commit {
  width: 100%;
}
.add-article-box-footer {
  border-top: #eee solid 1px;
  padding: 5px 10px;
  background: #f8f8f8;
  height: 45px;
  clear: both;
}
.add-article-box-footer button {
  float: right;
}

.btn-default,
.btn-primary {
  color: #fff;
  background-color: #3399cc;
}

.btn {
  margin-top: 5px;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.btn {
  top: -19px;
  background: #2882c5;
  border: 1px solid #2882c5;
  padding: 7px 17px;
  color: #fff;
  font-size: 14px;
  transition: 0.5s;
}
</style>